import jtd1      from './images/jtd1.png'
import jtd2      from './images/jtd2.png'
import jtd3      from './images/jtd3.png'
import jtd4      from './images/jtd4.png'
import pathIcon      from './images/car_info_path.png'
import infoIcon    from './images/car_info.png'
import moment    from 'moment'
import Mapwindow from './Mapwindow'
import unit from '@/util/unit'
import './styles/Mapcar.less'
import {getAddress}         from '@/plugin/Map/Mapaddress'


class Mapcar {

	marker = null
	timer = null
	isOpenWindow = false
	speed = 5
	isOpenpath = false
	event = {
		'end':[],
		'moving':[]
	}
	playObj = {
		gpslist:[],
		index:0,
		isPlay:false
	}


	constructor({map,gps,isWindow,info={status:1},winopts={}}){
		this.map = map;
		this.gps = gps;
		this.isWindow = isWindow;
		this.info = info;
		this.isExist = true;
		this.winopts = winopts;
		if(this.gps&&this.gps.lng){
			this._init();
			this._initWindow();
		}else{
			this.isExist = false;
		}
	}

	_init(){
		this.marker = new AMap.Marker({
        map: this.map,
        position: [this.gps.lng, this.gps.lat],
        content:this._createMarker(),
        zIndex:180,
    });
	}

	_createMarker(){
		this.marker_div = document.createElement('div');
		this.marker_div.innerHTML = `
			<div class="car-marker" >
				<div class="car-marker-content ${this.info.speed>100?'err':''} ${this.info.status?'':'nooly'}">
					<div class="car-head-img">
						<img src="${this.info.headPicUrl}" alt="" />
					</div>
				</div>
			</div>
		`;
		return this.marker_div;
	}


	_initWindow(){
		if(this.isWindow){
    	this.infowindow = new Mapwindow({map:this.map,isOnly:true,position:this.marker.getPosition(),offset:new AMap.Pixel(-10,-60),isShow:false,zIndex:200});
    	this.infowindow.onHide(()=>{
    		this.isOpenWindow = false;
    		this.marker.setzIndex(180);
    	});

    	this.infowindow.onShow(()=>{
    		this.marker.setzIndex(181);
    	});

    	let div = this._createInfoDiv();
	    this._div = div;
    	this._initWindowEvent();
    	this.infowindow.setHtml(div);
    	this.marker_div.querySelector('.car-marker').addEventListener('click',()=>{
  			if(this.isOpenWindow){
    			this.infowindow.hide();
    			this.isOpenWindow = false;
    			
    		}else{
    			this.infowindow.show();
    			this.winopts.onshow&&this.winopts.onshow(this);
    			this.isOpenWindow = true;
    		}
    	})
    }
	}

	center(){
		this.map.setFitView(this.marker);
	}

	refCar(info,gps){
		this.info = info;
		this._checkStatus();
		this.refWindow(info);
		this.setGps(gps);
	}

	refWindow(info){
		let div = this._createInfoDiv(this._div);
    this._div = div;
  	this._initWindowEvent(this.winopts.type);
	}


	_createInfoDiv(root){
		let div = root||document.createElement('div');
		let speed = this.info.speed!==null?this.info.speed:this.info.gpsSpeed;
		div.innerHTML = `
			<div class="car-info">
				<div class="title">
					<span>${this.info.driverName}</span>
					<span>(${this.info.tel})</span>
					<span style="float:right">${this.info.safetyIndex||''}</span>
				</div>
				<div class="car-info-main">
					<ul>
						<li><label >车速</label><span>${speed!==null?speed:'--'}公里/小时</span></li>
						<li><label >今日行驶</label><span>${this.info.todayMileage?this.info.todayMileage/1000:0}公里 </span></li>
						<li><label >行驶时长</label><span >${unit.time(this.info.todayDuration,1)}</span></li>
					</ul>
					<div class="infobtn">
							<div class="btn openPath ${this.isOpenpath?'active':''}"><img src="${pathIcon}" alt="" /></div>
					</div>
				</div>
			</div>
		`;
		return div;
	}
	openPath(){
		this.isOpenpath = true;
		this._div.querySelector('.openPath').classList.add("active");
	}
	closePath(){
		this.isOpenpath = false;
		this._div.querySelector('.openPath').classList.remove("active");
	}


	_initWindowEvent(){
			this._div.querySelector('.openPath').addEventListener('click',()=>this.winopts.openPath(this.info,this));
	}

	_move = ()=>{
		if(this.playObj.index < this.playObj.gpslist.length&&this.playObj.isPlay){
			let gps = this.playObj.gpslist[this.playObj.index++];
			this.marker.setPosition([gps.lng,gps.lat]);
			this.event['moving'].forEach(v=>v(gps,this.playObj.index-1));
			this.infowindow&&this.infowindow.setPosition([gps.lng,gps.lat]);
			this.timer = setTimeout(this._move,(10-this.speed) * 100);
		}else if(this.playObj.index === this.playObj.gpslist.length){
			this.playObj.isPlay = false;
			this.playObj.index = 0;
			this.event['end'].forEach(v=>v());
		}
	}

	setWindow(html){
		this.infowindow.setHtml(html);
	}

	on(n,f){
		this.event[n] = this.event[n]||[];
		this.event[n].push(f);
	}

	movePath(gpslist,info){
		this.info = info;
		this.playObj = {
			gpslist,
			index:0,
			isPlay:false,
			isEnd:false
		}
	}

	openWindow(){
		this.infowindow.show();
		this.winopts.onshow&&this.winopts.onshow(this);
		this.isOpenWindow = true;
	}

	closeWindow(){
		this.infowindow.hide();
  	this.isOpenWindow = false;
	}

	play(){
		this.playObj.isPlay = true;
		this._move();
	}

	pause(){
		clearTimeout(this.timer);
		this.playObj.isPlay = false;
	}

	reset(){
		clearTimeout(this.timer);
		this.playObj.isPlay = false;
		this.playObj.index = 0;
	}

	setGps(gps){
		this.gps = gps;
		this.marker.setIcon(new AMap.Icon({image:this.icons[this.status],imageSize:new AMap.Size(24,24),size:new AMap.Size(24,24)}));
		this.marker.setPosition(new AMap.LngLat(gps.lng,gps.lat));
		this.isWindow&&this.infowindow.setPosition([gps.lng,gps.lat]);
	}

	to(index){
		if(index!==this.playObj.index){
			this.playObj.index = index;
			let gps = this.playObj.gpslist[this.playObj.index];
			this.marker.setPosition([gps.lng,gps.lat]);
			this.event['moving'].forEach(v=>v(gps,this.playObj.index));
			this.infowindow&&this.infowindow.setPosition([gps.lng,gps.lat]);
			if(this.playObj.index === this.playObj.gpslist.length){
				this.playObj.isPlay = false;
				this.playObj.index = 0;
				this.event['end'].forEach(v=>v());
			}
		}
	}
	setzIndex(i){
		this.marker.setzIndex(i);
	}

	remove(){
		this.infowindow&&this.infowindow.setMap(null);
		this.marker&&this.marker.setMap(null);
	}
}
export default Mapcar;
